<template>
  <div class="page-order">
    <el-row>
      <el-col :span="4" class="navbar">
        <h3>我的订单</h3>
        <dl>
          <dd>
            全部订单
            <i class="el-icon-arrow-right" />
          </dd>
          <dd>
            待付款
            <i class="el-icon-arrow-right" />
          </dd>
          <dd>
            待使用
            <i class="el-icon-arrow-right" />
          </dd>
        </dl>
        <dl>
          <dt>我的收藏</dt>
          <dd>
            收藏的商家
            <i class="el-icon-arrow-right" />
          </dd>
          <dd>
            收藏的商品
            <i class="el-icon-arrow-right" />
          </dd>
        </dl>
      </el-col>
      <el-col :span="19" class="table">
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部订单" name="all">
            <list :orderList="orderList" :user="this.user" :pay="this.status" />
          </el-tab-pane>
          <el-tab-pane label="待付款" name="unpay">
            <list :orderList="unPayList" :user="this.user" :pay="this.status" />
          </el-tab-pane>
          <el-tab-pane label="待使用" name="unuse">
            <list :orderList="useList" :user="this.user" :pay="this.status" />
          </el-tab-pane>
          <el-tab-pane label="待评价" name="unreplay">
            <list :orderList="commentList" :user="user" :pay="this.status" />
          </el-tab-pane>
          <el-tab-pane label="已完成" name="finish">
            <list :orderList="finishList" :user="user" :pay="this.status" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import List from "@/components/order/list.vue";
import * as homeApi from "@/server/home.js";
export default {
  components: {
    List
  },
  data() {
    return {
      status: 0,
      userId: 0,
      user: {
        telephone: null,
        address: null
      },
      activeName: "all",
      orderList: [],
      finishList: [],
      unPayList: [],
      useList: [],
      commentList: []
    };
  },
  methods: {
    ifLogin: function() {
      var userId = localStorage.getItem("user");
      if (userId == null) {
        userId = 0;
      }
      homeApi.getUser(userId).then(result => {
        if (result.data.code != 200) {
          this.$message({
            duration: 1500,
            message: "请先登录",
            type: "warning"
          });
          this.$router.push("/login");
        }
      });
    },
    getOrder: function() {
      homeApi.getOrder(this.userId).then(result => {
        this.orderList = result.data.data;
        console.log(result.data.data);
        this.unPayList = this.orderList.filter(item => {
          if (item.status == 1) {
            return true;
          }
        });
        this.useList = this.orderList.filter(item => {
          if (item.status == 2) {
            return true;
          }
        });
        this.commentList = this.orderList.filter(item => {
          if (item.status == 3) {
            return true;
          }
        });
        this.finishList = this.orderList.filter(item => {
          if (item.status == 4) {
            return true;
          }
        });
        this.timer = setInterval(this.check, 2000);
      });
    },
    getUser: function() {
      homeApi.getUser(this.userId).then(result => {
        if (result.data.code == 200) {
          this.user = result.data.data;
          console.log(this.user);
        }
      });
    },
    check: function() {
      console.log(11);
      homeApi.payStatus(this.orderList, this.userId).then(res => {
        if (res.data.code == 200) {
          this.$alert("支付成功", {
            confirmButtonText: "确定"
          });
          this.getOrder();
        }
      });
    }
  },
  mounted() {
    this.ifLogin();
    this.userId = this.$route.query.id;
    this.getOrder();
    this.getUser();
  },
  created() {
    // 判断用户有没有登录
    if (this.$route.query.id == null || this.$route.query.id == 0) {
      this.$message({
        duration: 1500,
        message: "请先登录",
        type: "warning"
      });
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/css/order/index.scss";
</style>

